/**
 *  @name RoseChart
 * @desc 玫瑰图
 * */
import React, { Component } from "react"
import echarts from "echarts/lib/echarts"
// 引入柱状图
import "echarts/lib/chart/pie"
// 引入提示框和标题组件
import "echarts/lib/component/tooltip"
import "echarts/lib/component/title"

import "./styles.css"
class RoseChart extends Component {
  state = { buffer: [], nowId: "" }
  myChart = null

  componentDidMount() {
    this.init()
  }

  componentDidUpdate() {
    const { buffer = [], nowId = "" } = this.state
    const { data = [], ids = "" } = this.props
    const _buffer = JSON.stringify(buffer)
    const _data = JSON.stringify(data)
    if (nowId !== ids) {
      this.init()
      this.setState({ buffer: data, nowId: ids })
    }
  }
  init = () => {
    const { ids } = this.props
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(ids))
    this.updateData()

    this.myChart.resize()
  }

  updateData = () => {
    const { data } = this.props
    // 基于准备好的dom，初始化echarts实例
    // 绘制图表
    this.myChart.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{b} : {d}%"
      },
      legend: {
        // orient: "vertical",
        // top: "middle",
        bottom: 10,
        left: "center",
        data: ["优秀", "良好", "中等", "及格", "不及格"]
      },
      color: ["rgb(170, 233, 255)", "rgb(94, 144, 218)", "rgb(252, 178, 100)", "rgb(113, 167, 255)", "rgb(252, 111, 104)"],
      series: [
        {
          name: "总体评价",
          type: "pie",
          radius: [0, 80], //调节大小
          center: ["50%", "50%"],
          roseType: "radius",
          label: {
            normal: {
              //饼形图显示格式
              formatter: "{b|{b}}  {per|{d}%}  ",
              rich: {
                b: {
                  color: "white",
                  fontSize: 14,
                  lineHeight: 33
                },
                //设置百分比数字颜色
                per: {
                  color: "#00B4FB",
                  fontSize: 14,
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            }
          },
          emphasis: {
            label: {
              show: true
            }
          },
          data
        }
      ]
    })
  }
  render() {
    const { ids } = this.props
    return <div id={ids} className="chart"></div>
  }
}
export default RoseChart
